"use client";

/**
 * /w/:workspace/settings/automations/new — CREATE flow.
 *
 * A small form (name + optional description) that creates a DRAFT automation
 * (POST /workspaces/:id/automations) then navigates to the editor. The editor
 * (…/automations/:id) is where triggers/conditions/actions are configured.
 */
import { useState } from "react";
import { useParams, useRouter } from "next/navigation";
import { useMutation } from "@tanstack/react-query";
import { ArrowLeft, Loader2, Plus } from "lucide-react";
import { toast } from "@/stores/ui-store";
import { apiFetch } from "@/lib/api";
import { useWorkspace } from "@/hooks/use-workspace";
import { SettingsShell, Section, Field, inputCls } from "@/components/settings/settings-shell";
import type { AutomationDetail } from "@/components/automations/lib";

export default function NewAutomationPage() {
  const params = useParams<{ workspace: string }>();
  const slugOrId = params?.workspace ?? "";
  const router = useRouter();
  const { data: ws, isLoading } = useWorkspace(slugOrId);
  const wid = ws?.id ?? "";

  const [name, setName] = useState("");
  const [description, setDescription] = useState("");

  const create = useMutation({
    mutationFn: (input: { name: string; description?: string }) =>
      apiFetch<AutomationDetail>(`/workspaces/${wid}/automations`, {
        method: "POST",
        body: { name: input.name, ...(input.description ? { description: input.description } : {}) }
      }),
    onSuccess: (res) => {
      toast("success", "Automation created", "Add triggers and actions to make it run.");
      router.push(`/w/${slugOrId}/settings/automations/${res.id}`);
    },
    onError: (err) => {
      toast("error", "Could not create automation", err instanceof Error ? err.message : undefined);
    }
  });

  return (
    <SettingsShell title="New automation" description="Create a draft, then configure triggers and actions." active="automations">
      {isLoading || !ws ? (
        <p className="text-sm text-muted-foreground">Loading…</p>
      ) : (
        <Section title="Details" description="You'll configure triggers, conditions and actions on the next step.">
          <div className="space-y-3">
            <Field label="Name" hint="1–100 characters.">
              <input
                className={inputCls}
                placeholder="e.g. Triage new tickets"
                value={name}
                onChange={(e) => setName(e.target.value)}
                maxLength={100}
              />
            </Field>
            <Field label="Description (optional)" hint="Up to 500 characters.">
              <textarea
                className={`${inputCls} min-h-20`}
                placeholder="What should this automation do?"
                value={description}
                onChange={(e) => setDescription(e.target.value)}
                maxLength={500}
              />
            </Field>
            <div className="flex items-center gap-2 pt-1">
              <button
                type="button"
                className="inline-flex items-center gap-1 rounded-md border px-2.5 py-1.5 text-sm text-muted-foreground hover:text-foreground"
                onClick={() => router.back()}
              >
                <ArrowLeft className="size-4" /> Back
              </button>
              <button
                type="button"
                className="inline-flex items-center gap-1 rounded-md bg-primary px-2.5 py-1.5 text-sm font-medium text-white hover:opacity-90 disabled:opacity-50"
                disabled={!name.trim() || create.isPending}
                onClick={() =>
                  create.mutate({ name: name.trim(), ...(description.trim() ? { description: description.trim() } : {}) })
                }
              >
                {create.isPending ? <Loader2 className="size-4 animate-spin" /> : <Plus className="size-4" />}
                Create &amp; continue
              </button>
            </div>
          </div>
        </Section>
      )}
    </SettingsShell>
  );
}